<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  window.onload=function (ev) {
    document.getElementsByTagName("h1")[0].style.color="pink";
    // 选择器:
    // 1.找到网页中的body
    console.log(document.body);
    // 2.找到网页中所有的表单  反回的是一个数组   取值必须传下标
    console.log(document.getElementsByTagName("form"));
    // 3. 找到子元素children   反回的是一个数组   取值必须传下标
    console.log(document.getElementById("demodiv").children);
    console.log(document.getElementById("demodiv").children[0]);
    // 4.document.getElementById
    // 5.document.getElementByTagName
    // 6.document.getElementByClassName
    console.log(document.getElementsByClassName("pp"));
    var allclass=document.getElementsByClassName("pp");
    for(var i=0;i<allclass.length;i++){
      allclass[i].style.color="green";
    }
    // element查找网页元素
    // 7.选择器拼接
    console.log(document.getElementById("demodiv").getElementsByClassName("pp"));
    console.log(document.getElementById("demodiv").getElementsByClassName("pp")[1].getElementsByClassName("spana"));
    // 8.找到指定元素的父元素
    console.log(document.getElementsByClassName("spana")[0].parentNode);
  }
</script>
<h1>我是h1</h1>
<form action="#">
  <input type="text" name="name" />
</form>
<form action="#">
  <input type="text" name="name" />
</form>
<form action="#">
  <input type="text" name="name" />
</form>
<form action="#">
  <input type="text" name="name" />
</form>
<form action="#">
  <input type="text" name="name" />
</form>

<div>
  <p class="pp">aaa1</p>
  <p class="pp">aaa2
    <span></span>
    <span></span>
    <a>我是a标签</a>
  </p>
  <p class="pp">aaa3</p>
  <p class="pp">aaa4</p>
  <p class="pp">aaa5</p>
</div>

<div id="demodiv">

  <p class="pp">aaa1</p>
  <p class="pp">aaa2
    <span class="spana">spana</span>
    <span class="spana">spanb</span>
    <a>我是a标签</a>
  </p>
  <p class="pp">aaa3</p>
  <p class="pp">aaa4</p>
  <p class="pp">aaa5</p>
</div>
</body>
</html>
